﻿
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>jQuery手机端验证码登录表单</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link href="../static/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <section class="aui-flexView">
        <header class="aui-navBar aui-navBar-fixed">
            <a href="javascript:;" class="aui-navBar-item">
                <i class="icon icon-return"></i>
            </a>
            <div class="aui-center">
                <span class="aui-center-title"></span>
            </div>
            <a href="javascript:;" class="aui-navBar-item">
                客服
            </a>
        </header>
        <section class="aui-scrollView">
            <div class="aui-ver-head">
                <img src="../static/images/head.png" alt="">
            </div>
            <div class="aui-ver-form">
                <h2>短信快捷登录</h2>
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <i class="icon icon-phone"></i>
                        <input id="phone1" type="text" autocomplete="off" placeholder="手机号码">
                    </div>
                </div>
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <i class="icon icon-code"></i>
                        <input id="code1" type="text" autocomplete="off" placeholder="验证码">
                    </div>
                    <div class="aui-button-code">
                        <input id="btnSendCode1" type="button" class="btn btn-default" value="获取验证码" onclick="sendMessage()" />
                    </div>
                </div>
                <div class="aui-ver-button">
                    <button onclick="binding()">立即登录 / 注册</button>
                </div>
                <div class="aui-cell-box">
                    <label class="cell-right">
                        <input type="checkbox" value="1" name="checkbox" checked="checked">
                        <i class="cell-checkbox-icon"></i>
                        <em>同意扣扣网注册协议</em>
                    </label>
                </div>
            </div>
            <div class="aui-login-box">
                <h2>其它登录方式</h2>
            </div>
            <div class="aui-palace">
                <a href="javascript:;" class="aui-palace-grid">
                    <div class="aui-palace-grid-icon">
                        <img src="../static/images/icon-sc1.png" alt="">
                    </div>
                    <div class="aui-palace-grid-text">
                        <h2>微信</h2>
                    </div>
                </a>
                <a href="javascript:;" class="aui-palace-grid">
                    <div class="aui-palace-grid-icon">
                        <img src="../static/images/icon-sc2.png" alt="">
                    </div>
                    <div class="aui-palace-grid-text">
                        <h2>淘宝</h2>
                    </div>
                </a>
                <a href="javascript:;" class="aui-palace-grid">
                    <div class="aui-palace-grid-icon">
                        <img src="../static/images/icon-sc3.png" alt="">
                    </div>
                    <div class="aui-palace-grid-text">
                        <h2>腾讯</h2>
                    </div>
                </a>
                <a href="javascript:;" class="aui-palace-grid">
                    <div class="aui-palace-grid-icon">
                        <img src="../static/images/icon-sc4.png" alt="">
                    </div>
                    <div class="aui-palace-grid-text">
                        <h2>微博</h2>
                    </div>
                </a>
            </div>
        </section>
    </section>
</body>
<script src="../static/js/jquery-1.10.2.js"></script>
<script type="text/javascript">
    var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
   /* var count = 20;*/
    var InterValObj1;
   /* var curCount1;*/
    function sendMessage() {
       /* curCount1 = count;*/
        var phone = $.trim($('#phone1').val());
        if (!phoneReg.test(phone)) {
            alert(" 请输入有效的手机号码");
            return false;
        }

       /* $("#btnSendCode1").attr("disabled", "true");
        $("#btnSendCode1").val(+curCount1 + "秒再获取");
        InterValObj1 = window.setInterval(SetRemainTime1, 1000);*/
        $.ajax({
            url:"[[@{/getCode}]]",
            type:"post",
            data:{"phone":phone},
            dataType:"json",
            success:function (data) {
                alert(data.message)
            }

        })

    }
   /* function SetRemainTime1() {
        if (curCount1 == 0) {
            window.clearInterval(InterValObj1);
            $("#btnSendCode1").removeAttr("disabled");
            $("#btnSendCode1").val("重新发送");
        }
        else {
            curCount1--;
            $("#btnSendCode1").val(+curCount1 + "秒再获取");
        }
    }*/

    function binding() {
        var phone = $.trim($('#phone1').val());
        var code = $.trim($('#code1').val());
        $.ajax({
            url:"[[@{/verify}]]",
            type:"post",
            data:{"phone":phone,"code":code},
            dataType:"json",
            success:function (data) {
                if (data.code==1){
                    location.href="[[@{/toLogin}]]"
                }else if(data.code==-1){
                    alert(data.message)
                }else {
                    alert(data.message)
                }
            }

        })
    }
</script>
</html>
